<template>
    <view class="changetel-container">
        <nav-bar title="更换手机"></nav-bar>
        <view class="changetel-input">
            <view class="changetel-input-box">
                <input
                    type="number"
                    placeholder="请输入原手机号吗"
                    placeholder-class="changetel-input-placeholder"
                    v-model="form.tel"
                    maxlength="11"
                />
            </view>
            <view class="changetel-input-box">
                <input
                    type="password"
                    placeholder="请输入登录密码"
                    placeholder-class="changetel-input-placeholder"
                    v-model="form.password"
                />
            </view>
            <view class="changetel-input-box">
                <input
                    type="number"
                    placeholder="请输入原手机号吗"
                    placeholder-class="changetel-input-placeholder"
                    v-model="form.tel"
                    maxlength="11"
                />
            </view>
            <view class="changetel-input-box">
                <input
                    type="text"
                    placeholder="输入验证码"
                    placeholder-class="changetel-input-placeholder"
                    v-model="form.code"
                    class="changetel-input-box-code"
                />
                <view
                    class="changetel-input-getcode"
                    @click="getCode"
                    v-if="!isGetCode"
                >
                    获取验证码
                </view>
                <view
                    class="changetel-input-getcode"
                    @click="getCode"
                    v-if="isGetCode"
                >
                    {{ delay }}s
                </view>
            </view>
        </view>
        <text class="changetel-btn"> 确定 </text>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        return {
            form: {
                tel: "",
                password: "",
            },
            delay: 0,
            isGetCode: false,
            getCodeBtnText: "获取验证码",
        };
    },
    methods: {
        getCode() {
            if (!this.isGetCode) {
                this.isGetCode = true;
                this.delay = 60;
                var timer = setInterval(() => {
                    this.delay--;
                    if (this.delay <= 0) {
                        this.isGetCode = false;
                        clearInterval(timer);
                    }
                }, 1000);
            }
        },
    },
};
</script>

<style scoped>
page {
    background-color: rgb(253, 253, 240);
}
.changetel-container {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.changetel-title {
    display: flex;
    justify-content: center;
    margin-top: 180rpx;
}
.changetel-title-btn {
    margin: 0 60rpx;
    padding: 10rpx 10rpx;
    font-size: 32rpx;
}
.changetel-title-btn-active {
    border-bottom: 8rpx solid #e46c0b;
}
.changetel-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100rpx;
    padding: 20rpx;
}
.changetel-input-box input {
    width: 100%;
    background-color: rgb(250, 247, 250);
    padding: 40rpx;
    border-radius: 80rpx;
    border: 2rpx solid rgb(51, 204, 0);
}
.changetel-input-placeholder {
    font-size: 32rpx;
}
.changetel-input-forget {
    width: 100%;
    text-align: end;
    margin-top: 20rpx;

    padding-right: 20rpx;
}
.changetel-btn {
    width: 100%;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-top: 80rpx;
    padding: 30rpx 40rpx;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 80rpx;
    font-size: 40rpx;
    color: #fff;
}
.changetel-input-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
}
.changetel-input-getcode {
    padding: 40rpx 10rpx;
    border-radius: 80rpx;
    width: 600rpx;
    font-size: 32rpx;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-left: 20rpx;
    color: #fff;
}
.changetel-input-box-code {
    width: 100%;
}
</style>
